<template>
  <div>
    <div class="input-con">
      <input
        id="radius"
        ref="redius"
        type="range"
        min="1"
        max="50"
        step="1"
        value="50"
      />
      <input
        id="blur"
        ref="blur"
        type="range"
        min="1"
        max="50"
        step="1"
        value="50"
      />
    </div>
    <div id="map-con5" ref="mapCon5"></div>
  </div>
</template>

<script>
import Map from "ol/Map";

import OSM from "ol/source/OSM";
import Stroke from "ol/style/Stroke";
import { Tile as TileLayer, Heatmap as HeatmapLayer } from "ol/layer";
import View from "ol/View";
import { fromLonLat } from "ol/proj";
import { Heatmap } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import { KML, GeoJSON } from "ol/format";
import axios from "axios";
import { Feature } from "ol";
import { Point } from "ol/geom";

export default {
  name: "graticule",
  data() {
    return {
      map: null,
    };
  },
  created() {},
  async mounted() {
    let that = this;
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM({
            wrapX: false, // Whether to wrap the world horizontally
          }),
        }),
      ],
      target: this.$refs.mapCon5,
      view: new View({
        center: fromLonLat([4.8, 47.75]),
        zoom: 5,
      }),
    });

    this.map = map;
    // const geoData = await this.getArea();
    const cusSource = new VectorSource({
      features: [new Feature({
          geometry: new Point(fromLonLat([4.8, 47.75])),
          name: "啦！！！啦---啦"
      })],
    });

    let vector = new HeatmapLayer({
      source: cusSource,
      blur: parseInt(50, 10),
      radius: parseInt(50, 10),
      weight(feature) {
        
        return 0.99;
      },
      zIndex: 10,
    });

    map.addLayer(vector);

  },
  methods: {
    async getArea() {
      const data = await axios.get("./0.json");
      return data;
    }
  },
};
</script>

<style scope>
#map-con5 {
  height: 80vh;
}
</style>